Do you have a custom favicon for your blog? Do you want to learn what a favicion is and how to make a custom favicon for your blog? My setp-by-step tutorial will give you valuable insights on favicon. You should have a favicon installed on your blog โ to make it look professional and prettier.
Welcome to another session of #SaturdayTutorials with Tina which I started last week. Every Saturday Iโll be posting some tutorial and โhow toโ posts on blogging better and making your blog better. I might do some sessions on social media as well some time later.
In this โhow-toโ post I am going to show you how to make Custom Favicon for your blog with free tools. I am a complete Photoshop and Illustrator junkie and most of my stuffs are done there. But for tutorial sake I am going to use all free tools. And for this post I am going to use Picmonkey.
We announced winners for #ThankfulThursdays and #FridayFotoFiction for last week and as winning prize they both will be getting Custom Favicons for their blogs! Custom made by me for them and I am going to show you how to design a favicon, generate a favicon file and install that in your blog โ for both Blogger and WordPress sites.
What on Earth is a Favicon?
Are you thinking in mind what the hell is this girl going on writing about favicon! What on earth is a favicon??? Well look up to your browser tab do you see a tiny logo on the browser tab next to the name of the site? That my friend is a Favicon โ shorter version of โFavorite Iconโ!
Do I Really Need this Tiny Little Thing?
Donโt underestimate the power of the tiny image. It is as powerful as your blogโs logo or header. A Favicon helps you to visually identify your sites tab in browser. Did you ask what the name of your Blog is doing then? Open some 10-12 new tabs in your Chrome or FireFox you will understand what I am saying.
How to Design your own Custom Favicon?
For this tutorial I am going to do two favicons for kreativemommy and sirimiri. When I checked their blog I didnโt find a custom logo on which I can build up. In my future tutorials Iโll show you how to make logo or blog header and that might help you guys.
Create the Graphic
Using Picmonkey create a graphic close to your blogโs logo or header in a square shape in 512 x 512 pixels. Always work on transparent background.
Now using Overlays and Text tool create a desired shape or initial for the blog. Itโs better if it is relevant to your blog / blogโs niche / blogโs logo.
Pro Tip โ Simpler the better โ too many things in this small space will not be visible.
I am making a simple shape and initial for kreativemommy in tune with her blogโs color scheme.
You will find shapes under Overlays > Geometric. I am using two shapes to make a callout bubble.
Save the image in .png form (it will come as default since we have taken transparent background).
Generate .ico File
The favicon is essentially an icon and has to be saved as .ico file. There are tons of free tools on the net which help you creating this. We will be using the Iconifier for todayโs tutorial. I like it because you have tons of options to choose from.
Click on choose file to choose the .png file that you have saved on your system from the previous step. And then click on iconify.
This will give you many options. Click on the tiniest one at the last which is the favicon.ico file. Save it on your system.
So now your favicon is ready.
How to install Favicon on your Blog?
For Blogger
Go to Layout from your dashboard and upload the favicon.ico file in the favicon section on top left.
For WordPress.com Blogs
Go to Settings > General > Blog icon
Upload the .ico file. Sometimes wordpress dot com blogs have problem with .ico files. If you face that problem use .png file that will work too in wordpress.com blogs.
Now you are all set to go even if your blog is opened in a device with higher resolution like an apple device with retina display.
For Self โ Hosted WordPress Site
Go to Appearance > Customize>Site Identity > Site Icon and upload the favicon.
This is how it looks on my Site Tina Basu
So now your favicon is up and running in every kind of platform.
Still not sure how it is going to help?
Here is what happens when you have 12 tabs open on your browser. ย Without the favicon one wouldnโt even know which site is open. I suggest your favicons that resemble your sites logo so that it is easy to identify โ which essentially is your brand.
Simplest and tiniest of things can be important too. Remember that.
Things to keep in mindย while making your favicon
Do not use light colors โ the browser tab is mostly light grey โ so light color will get lost
Do not use thin script font โ that will be completely missed
The actual favicon size on the browser is tiny โ 16 px x 16 px. So keep things simple. We have taken 512 px x 512 px because the resolution of screens differ from device to device. Whatever is the device you want your favicon to look great โ be it a laptop or an iPhone or an iPad.
Here is how kreativemommy’s favicon looked earlier (on left). And next to it you can see the new one (which I have uploaded on a test site). Can you spot the difference in visibility?
Sirimiri on the other hand didn’t have a favicon so far. But now she can flaunt one – a vibrant one, that too!
Here are the winning two favicons for Deepa and Mayuri.
Hope you liked this Favicon Tutorial and I have made it easy for you to understand โ the need of a custom favicon, how to design one, how to make the .ico file and how to install it in your site.
Now exercise for you is to make a custom favicon for your site, upload it and let me know how it is!
If you liked this tutorial โ hit the like button or share it on your social media and tag me.
Let me also know what all you would want me to do a tutorial on. I will make tutorials based on your suggestions.
So Iโm signing off here today. Come join me for another session of fun learning next Saturday!
18 comments
Wow, Tina! What a treat this is! not only do I get a Favicon, but I also get to learn to make myself one.
Your Saturday Tutorials are fun, easy to follow and so aesthetically pleasing too, really enjoying them. I learnt to make a Badge last Saturday and a Favicon today. Eagerly awaiting to see what next Saturday will bring!
Well again Tina,how do you manage to do such wonderful things?I will try one for myself and would let you know for sure.
Awesome..thanks a lot for making this favicon for me. Loved it and can’t wait to display it on my site. And got to learn it too so it’s a double treat actually.
I loved the tutorial. It was really helpful.
The pro tips make it stand out from the other tutorials.
LOOKING forward to more tutorials .
You are doing such a noble thing you know. I had this favicon made for my site. But not this way I guess.I don’t know how I did. N I never knew it was called favicon ๐ what a lovely gift for the girls. Awesome.
This is really useful Tina! I want a favicon done on my site and I am doing it now. I have already decided how it is going to look. Thanks for this tutorial Tina!
Lovely Tina…The tutorial is so simple to follow. I have a Favicon for my Blog but I would definitely want to try this for my new Craft website. Thanks. Keep coming up with more tutorials. I am sure everyone would wait for them.
Nice post. I be taught something more difficult on totally different blogs everyday. It’ll all the time be stimulating to learn content material from other writers and follow slightly one thing from their store. Iโd want to make use of some with the content material on my weblog whether you donโt mind. Natually Iโll provide you with a link on your internet blog. Thanks for sharing.
Thanks Tina for this amazing tutorial session.. I didnt know about favicon earlier. But the moment i kearnt about i have tried it on my blog. it looking wonderful.. do have a look.. i not a pro in it but i have tried something new.
http://scribblerarnaba.blogspot.in/
i am looking forward to your future tutorials..
Hello Tina!! thanks for checking out my blog and suggesting the improvisations of my favicon. please do check, i have made the suggested changes. hope this one better..
https://scribblerarnaba.blogspot.in/
keep writing and guiding.. waiting for your tutorials..
Wow this is so useful post.
I am creating a favicon for my blog.
Help me if I get struck please ๐
I would make a favicon soon , I’ll contact you for help but have to say that you come up with amazing post
The tutorial is really impressive and the instructions also seem to be easy to follow. I am definitely going to work on this the coming weekend. Thanks for sharing.
Wow, absolutely loved it. Had thought on it few times back, now gonna do it!
This is like going back to school for a D-I-Y ! Great !
I didnโt even know what a favicion was until I read your blog. Quite informative.
I am loving the #saturdaytutorials Tina <3 When i tried the Instagram hack i kept searching the old posts on the same series on your blog and found this one. Surprisingly my blog has a favicon(which i had set by default when i was first creating the blog) which i didnt know was called a favicon ๐ ๐
But now that i do thanks to you am planning to make a new one!!! ๐
Thanks a bunch once again
Thank you so much Sneha. I hope the tutorial will help you to create your own favicon